@import "init.scss";
@import "constants";

.header{
    width: 100%;
    height: $navHeight;
    background-color: #3a3a3a;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    top: 0;

    .container{
        width: $pageWidth;
        //background-color: yellow;
        height: 100%;
		margin: 0 auto;

        .logo-box{
            width: 140px;
            height: 100%;
            text-align: center;
            line-height: $navHeight;
            font-size: 20px;
            float: left;
            cursor: pointer;

            a{
                display: block;
                width: 100%;
                height: 100%;
                color: white;
            }
        }

        .nav{
            float: left;
            margin-left: 120px;

            li{
                float: left;
                margin-right: 40px;
                line-height: $navHeight;
                height: $navHeight; //不设置此高度会导致border-box无效
                box-sizing: border-box;

                a{
                    color: white;
                }

                &.active{
                    border-bottom: 5px solid #5c87d9;
                }
            }
        }

        .auth-box{
            float: right;
            line-height: $navHeight;
            height: $navHeight;
            font-size: 20px;
            color: white;

            .iconfont{
                color: white;
                line-height: $navHeight;
                height: $navHeight;
                display: inline-block;
                font-size: 22px;
            }

            a{
                color: white;
                &:hover{
                    color: $themeColor;
                }
            }

            &:hover .auth-info .auth-list{
                display: block;
            }

            .auth-info{
                position: relative;
                display: inline-block;

                .auth-list{
                    position: absolute;
                    top: 54px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 80px;
                    background-color: white;
                    border: 1px solid $lineColor;
                    border-radius: 5px;
                    display: none;

                    &:before{
                        content: "";
                        height: 0;
                        position: absolute;
                        top: -16px;
                        left: 50%;
                        transform: translateX(-50%);
                        border: 8px solid;
                        border-color: transparent transparent #fff transparent;
                        display: inline-block;
                    }
                    ul{
                        width: 100%;
                        li{
                            display: block;
                            padding: 10px 0;
                            width: 100%;
                            height: 30px;
                            border-bottom: 1px solid $lineColor;
                            line-height: 30px;
                            text-align: center;

                            a{
                                color: $mainFontColor;
                                font-size: 14px;

                                &:hover{
                                    color: $themeColor;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}